<template>
  <el-row style="width: 100%;">
    <!-- 左边 -->
    <el-col :span="12">{{ data.name }}</el-col>
    <!-- 右边 -->
    <el-col :span="12">
      <!-- flex 布局让内容靠右对齐 -->
      <el-row type="flex" justify="end">
        <span class="manager">{{ data.manager }}</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="checkBtnPerm('add-department')" command="add" @click.native="addDept">添加子部门</el-dropdown-item>
            <el-dropdown-item v-show="checkBtnPerm('edit-department')" v-if="bool" command="edit" @click.native="editDept">编辑部门</el-dropdown-item>
            <el-dropdown-item v-show="checkBtnPerm('del-department')" v-if="bool" command="del" @click.native="delDept">删除部门</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    bool: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    addDept() {
      console.log('新部门点击触发')
      this.$emit('addEvent', this.data)
    },
    delDept() {
      this.$emit('delEvent', this.data)
    },
    editDept() {
      this.$emit('editEvent',this.data)
    }
  }
}
</script>
  <style lang="scss" scoped>
  .manager {
      margin-right: 20px;
    }
  </style>

